<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="file/webuploader.css">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
        }

        .bg {
            border-radius: 5px;
            width: 1000px;
            background-color: #fff;
            margin: 40px auto;
            box-shadow: -80px 10px 80px 1px gray;
            padding: 40px 40px;
        }

        .fm {
            width: 700px;
            margin: 0 auto;
        }

        table.tftable {
            font-size: 12px;
            width: 100%;
            border-width: 1px;
            border-collapse: collapse;
        }

        table.tftable th {
            font-size: 12px;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            text-align: left;
        }

        table.tftable td {
            font-size: 12px;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
        }
    </style>
</head>

<body>
    <div class="bg">
        <h1>个人信息</h1>
        <table id="info" class="tftable" border="1">
            <tr>
                <th>id</th>
                <th>考号</th>
                <th>身份证号</th>
                <th>姓名</th>
                <th>登陆密码</th>
            </tr>
        </table>
        <h1>我的考试科目</h1>
        <table id="subjects" class="tftable" border="1">
            <tr>
                <th>id</th>
                <th>考试科目名称</th>
                <th>考试开始日期</th>
                <th>考试结束日期</th>
            </tr>
        </table>
        <h1>我已上传的视频文件</h1>
        <table id="files" class="tftable" border="1">
            <tr>
                <th>id</th>
                <th>上传位置</th>
                <th>上传日期</th>
                <th>考生id</th>
                <th>考试科目</th>
            </tr>
        </table>
    </div>
    <div class="bg">
        <h1>上传文件</h1>
        <input type="text" id="subjectid_" placeholder="课程id">
        <div id="uploader" class="wu-example">
            <!--用来存放文件信息-->
            <div id="thelist" class="uploader-list"></div>
            <div class="btns">
                <div id="picker">选择文件，文件名不允许有特殊符号</div>
                <button id="ctlBtn" class="btn btn-default">开始上传</button>
            </div>
        </div>
    </div>
    <script src="file/jQuery-v3.5.1.js"></script>
    <script src="file/config.js"></script>
    <script src="file/webuploader.js"></script>
    <script>
        //加载时获取
        $.ajax({
            type: 'get',
            url: window.config.port + 'php/index.php?c=getmyfile',
            headers: {
                'token': sessionStorage['id']
            },
            async: false,
            success: function (rs) {
                if (rs.code == 200) {
                    $('#files').append(function () {
                        var html = '';
                        rs.data.forEach(row => {
                            html += '<tr><th>' + row.id + '</th><th><a href="' + window.config.port + 'php/uploader' + row.filelocation + '">' + row.filelocation + '</a></th><th>' + row.addtime + '</th><th>' + row.examinee_id + '</th><th>' + row.subject_id + '</th></tr>'
                        });
                        return html;
                    });
                }
            }
        });
        var examinee_id;
        var testnumber;
        var subject_id;
        var filelocation;
        $.ajax({
            type: 'get',
            url: window.config.port + 'php/index.php?c=getmyinfo',
            headers: {
                'token': sessionStorage['id']
            },
            async: false,
            success: function (rs) {
                if (rs.code == 200) {
                    $('#info').append(function () {
                        var html = '';
                        rs.data.forEach(row => {
                            testnumber = row.testnumber;
                            examinee_id = row.id;
                            html += '<tr><th>' + row.id + '</th><th>' + row.testnumber + '</th><th>' + row.idnumber + '</th><th>' + row.name + '</th><th>' + row.password + '</th></tr>'
                        });
                        return html;
                    });
                }
            }
        });

        $.ajax({
            type: 'get',
            url: window.config.port + 'php/admin.php?c=getsubject',
            headers: {
                'token': sessionStorage['id']
            },
            async: false,
            success: function (rs) {
                if (rs.code == 200) {
                    $('#subjects').append(function () {
                        var html = '';
                        rs.data.forEach(row => {
                            html += '<tr><th>' + row.id + '</th><th>' + row.name + '</th><th>' + row.startime + '</th><th>' + row.endtime + '</th></tr>'
                        });
                        return html;
                    });
                }
            }
        });

        //文件上传
        var uploader = WebUploader.create({
            auto: true,
            // swf文件路径
            swf: 'file/Uploader.swf',
            // 文件接收服务端。
            server: 'http://localhost:8083/php/index.php?c=addmyfile&testnumber=' + testnumber,
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        })
        // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function (file) {
            var $list = $('#thelist')
            $list.append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>');
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100 + '%');
        });

        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).find('p.state').text('已上传');
            subject_id = $('#subjectid_').val();
            $.post('http://localhost:8083/php/index.php?c=addmyfile2', {
                subject_id,
                testnumber,
                examinee_id,
                filelocation: '/' + testnumber + '/' + file.name
            }, function (rs) {
                if (rs.code == 200) {
                    alert('上传成功')
                    window.location.reload()
                } else {
                    alert('上传失败')
                }
            })
        });

        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });

        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });
    </script>
</body>

</html>